<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>总结生命周期</title>
</head>
<script type="text/javascript" src="../js/vue.js"></script>
    <body>
        <!--
            常用的生命周期钩子：
                1.mounted：发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】；
                2.beforeDestroy：清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。

            关于销毁Vue实例：
                1.销毁后借助Vue开发者工具看不到任何信息；
                2.销毁后自定义事件会失效，但原生DOM事件依然有效；
                3.一般不会在beforeDestroy操作数据，因为即使操作数据，也不会再触发更新流程了。
        -->
        <div id="root">
            <hr/>
            <h1 :style="{opacity}">欢迎学习Vue</h1>
            <button @click="stop()">点我停止变换</button>
        </div>

        <script type="text/javascript">
            Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示。
            
            new Vue({
                el:"#root",
                data:{
                    opacity:1
                },
                methods: {
                    stop(){
                        this.$destroy();
                    }
                },
                mounted() {
                    //this.timer表示将当前定时器负责给一个属性，放在vm身上
                    this.timer = setInterval(() => {
                        this.opacity -= 0.1;
                        if(this.opacity <= 0) this.opacity = 1
                    },100)
                },
                beforeDestroy () {
                    // 清理定时器
                    clearInterval(this.timer);
                    console.log('vm驾鹤西游了');
                },
            })
        </script>
        
    </body>
</html>